<template>
  <div class="dashboard-container">
    <div class="dashboard-carousel">
      <el-carousel height="800px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <el-image :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="dashboard-profile">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="24" style="padding-left: 20px">
          <h2>项目管理系统</h2>
          <p>
            一直想做完成一个前后端分离的项目，看了很多优秀的开源项目，学习其中的优秀写法。于是利用期末大作业时间开始自己写一套系统。
            如此有了这次的项目管理系统，本人对于完整的项目的认识为零，这次是对过去所学技术的基本运用以及综合。
          </p>
          <p>
            <b>当前版本:</b> <span>v1.0</span>
          </p>
        </el-col>
      </el-row>
    </div>

    <div class="dashboard-info">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <div class="body">
              <p>
                <i class="el-icon-user" /> 姓名：王毅楠
              </p>
              <p>
                <i class="el-icon-paperclip" /> 专业：计算1912
              </p>
              <p>
                <i class="el-icon-s-promotion" /> 主页：<el-link
                  href="javascript:;"
                  target="_blank"
                >http://www.xxx.com</el-link>
              </p>
              <p>
                <i class="el-icon-chat-dot-round" /> 微信：WeChat
              </p>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>后端技术</span>
            </div>
            <div class="body">
              <p>SpringBoot</p>
              <p>SpringMVC</p>
              <p>MyBatis-Plus</p>
              <p>Druid</p>
              <p>MySQL</p>
              <p>Swagger</p>
              <p>Sa-token</p>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>前端技术</span>
            </div>
            <div class="body">
              <p>Vue</p>
              <p>Vue-router</p>
              <p>element-ui</p>
              <p>Vuex</p>
              <p>axios</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      imgs: [
        require('@/assets/carousel/1.png'),
        require('@/assets/carousel/2.png'),
        require('@/assets/carousel/3.png'),
        require('@/assets/carousel/4.png'),
        require('@/assets/carousel/5.png'),
        require('@/assets/carousel/6.png'),
        require('@/assets/carousel/7.png')
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  min-height: calc(100vh - 50px);
  background-color: #ffffff;

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #676a6c;

  .dashboard-profile{
    padding: 20px;
    margin-bottom: 20px;
  }

  .dashboard-info{
    padding: 20px;
  }
}
</style>
